<template>
  <div class="auth-container">
    <div class="logo">
      <!-- <img src="@/assets/images/nav-img/logo.png" alt="" /> -->
      <!-- <p>这是放Logo的，懒得优化</p> -->
    </div>
    <!-- 背景装饰 -->
    <div class="auth-bg"></div>

    <!-- 主内容区 -->
    <div class="auth-card">
      <!-- 选项卡导航 -->
      <div class="tab-header">
        <div
          class="tab-item"
          :class="{ active: authStore.activeTab === 'login-form' }"
          @click="switchTab('login-form')"
        >
          登录
        </div>
        <div
          class="tab-item"
          :class="{ active: authStore.activeTab === 'register-form' }"
          @click="switchTab('register-form')"
        >
          注册
        </div>
      </div>

      <!-- 登录表单 -->
      <login-form
        v-show="authStore.activeTab === 'login-form'"
      />


	  <!-- 注册表单 -->
      <register-form
        v-show="authStore.activeTab === 'register-form'"
      />
      <!-- 注册表单 -->
      <!-- <register-form
        v-show="activeTab === 'register-form'"
        :register-form="registerForm"
        :countdown="countdown"
        @validate-username="validateUsername"
        @validate-phone="validatePhone"
        @get-code="getVerificationCode"
        @register="handleRegister"
        @switch-tab="switchTab"
      /> -->
    </div>
  </div>
</template>

<script setup>
import LoginForm from "./components/login-form.vue";
import RegisterForm from "./components/register-form.vue";
import { useAuthStore } from "@/stores/auth-store";

const authStore = useAuthStore()
// 状态管理
// const activeTab = ref("login-form");
// const registeredAccount = reactive({
// 	usernameOrPhone: "",
// 	password: ""
// });
// const countdown = ref(0);
// let countdownTimer = null;

// // 表单数据
// const loginForm = reactive({
//   username: "",
//   password: "",
//   showPassword: false,
//   remember: false,
// });

// const registerForm = reactive({
//   username: "",
//   phone: "",
//   code: "",
//   password: "",
//   showPassword: false,
//   agreeTerms: false,
// });

// 选项卡切换
const switchTab = (tabId) => {
  authStore.activeTab = tabId;
//   resetFormErrors();
};

// const autoLogin = (username, password) => {
// 	switchTab('login-form')
// 	registeredAccount.usernameOrPhone = username
// 	registeredAccount.password = password;
// }

// // 重置表单错误
// const resetFormErrors = () => {
//   usernameError.value = "";
//   phoneError.value = "";
//   codeError.value = "";
//   passwordError.value = "";
// };

// // 用户名验证
// const validateUsername = () => {
//   if (!registerForm.username) {
//     usernameError.value = "请输入用户名";
//   } else if (registerForm.username.length < 3) {
//     usernameError.value = "用户名长度至少为3个字符";
//   } else {
//     usernameError.value = "";
//   }
//   return !usernameError.value;
// };

// // 手机号验证
// const validatePhone = () => {
//   const phonePattern = /^1[3-9]\d{9}$/;
//   if (!registerForm.phone) {
//     phoneError.value = "请输入手机号";
//   } else if (!phonePattern.test(registerForm.phone)) {
//     phoneError.value = "请输入有效的手机号";
//   } else {
//     phoneError.value = "";
//   }
//   return !phoneError.value;
// };

// // 获取验证码
// const getVerificationCode = () => {
//   if (!validatePhone()) return;

//   // 模拟发送验证码
//   console.log("发送验证码到:", registerForm.phone);

//   // 设置倒计时
//   countdown.value = 60;
//   countdownTimer = setInterval(() => {
//     countdown.value--;
//     if (countdown.value <= 0) {
//       clearInterval(countdownTimer);
//     }
//   }, 1000);

//   // 显示提示
//   alert("验证码已发送，请注意查收");
// };

// // 密码验证
// const validatePassword = () => {
//   if (!registerForm.password) {
//     passwordError.value = "请输入密码";
//   } else if (registerForm.password.length < 6) {
//     passwordError.value = "密码长度至少为6个字符";
//   } else {
//     passwordError.value = "";
//   }
//   return !passwordError.value;
// };

// // 注册处理
// const handleRegister = () => {
//   // 完整验证
//   const isUsernameValid = validateUsername();
//   const isPhoneValid = validatePhone();
//   const isPasswordValid = validatePassword();

//   if (!isUsernameValid || !isPhoneValid || !isPasswordValid) {
//     return;
//   }

//   if (!registerForm.code) {
//     codeError.value = "请输入验证码";
//     return;
//   }

//   if (!registerForm.agreeTerms) {
//     alert("请同意服务条款和隐私政策");
//     return;
//   }

//   // 模拟注册请求
//   console.log("注册请求:", registerForm);

//   // 模拟注册成功
//   setTimeout(() => {
//     alert("注册成功！请使用新账号登录");
//     switchTab("login-form");
//   }, 1000);
// };

// // 清理倒计时
// onBeforeUnmount(() => {
//   if (countdownTimer) {
//     clearInterval(countdownTimer);
//   }
// });
</script>

<style scoped>
.logo {
  margin-top: -700px;
}
/* 基础样式 */
.auth-container {
  --primary-color: #4f46e5;
  --secondary-color: #10b981;
  --error-color: #ef4444;
  --neutral-color: #6b7280;
  --light-bg: #f9fafb;
  --border-color: #e5e7eb;
}

.auth-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: var(--light-bg);
  position: relative;
  overflow: hidden;
}

.auth-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
      circle at 20% 20%,
      rgba(79, 70, 229, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(16, 185, 129, 0.05) 0%,
      transparent 50%
    );
  z-index: 0;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: 40px 32px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.auth-card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* 选项卡 */
.tab-header {
  display: flex;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border-color);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--neutral-color);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.tab-item.active {
  color: var(--primary-color);
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
  border-radius: 1px;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade {
  animation: fadeIn 0.4s ease forwards;
}

/* 响应式 */
@media (max-width: 480px) {
  .auth-card {
    padding: 32px 24px;
    max-width: 100%;
  }
}
</style>